<template>
    <div class="BackPic">
      <el-row class="loginMain">
        <el-col :span="24">
          <!-- 卡片 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix"><span style="font-size:30px;">登录</span></div>
            <div class="text item">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="userName">
                  <el-input v-model="ruleForm.userName" style="margin: 5px auto"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password" style="margin: 5px auto" show-password clearable></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captCode">
                  <el-row>
                    <el-col :span="13">
                      <el-input v-model="ruleForm.captCode" style="width: 180px; float: left"></el-input>
                    </el-col>
                    <el-col :span="11">
                      <img style="width: 120px; height: 55px" id="ImgId" :src="'http://localhost:5000/api/ICaptcha/Captcha?id=' + ruleForm.captId" @click="createCheckCode" />
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="userLogin('ruleForm')">登录</el-button>
                  <el-button type="text" @click="OpenRegister()">注册</el-button>
                  <el-button type="text" @click="resetForm()">找回密码</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 使用dialog对话框 注册用户 -->
      <el-dialog title="注册" :visible.sync="dialogFormVisible">
        <RegisterView ref="RegisterView"></RegisterView>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="Reg()">注 册</el-button> <!-- 点击事件=》通过父组件==调用==子组件页面的注册方法-->
          <el-button @click="dialogFormVisible = false">取 消</el-button>         
        </div>
      </el-dialog>   

    </div>
</template>
<script>
import { LoginJS } from "../../api/admin.js";
import RegisterView from "../User/UserRegister.vue";  //注册页面
export default {
  //组件
  components: {  
    RegisterView,
   },
  data() {
    return {
      dialogFormVisible: false,  
      ruleForm: {
        userName: "",
        password: "",
        captId: "1",  //验证码默认值
        captCode: "",  //验证码
      },
      //表单验证
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur",},
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        captCode: [{ required: true, message: "请输入验证码", trigger: "blur" },],
      },     
    };
  },
  methods: {
    //【验证码】
    createCheckCode() {
      if (document.getElementById("ImgId") != null) 
      {
        document.getElementById("ImgId").src(
            "http://localhost:5000/api/ICaptcha/Captcha?id=" + this.ruleForm.captId++
        );
      }
    },
    //【登录】
    userLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          LoginJS(this.ruleForm).then((res) => {
            if (res.data.result == 200) {            
              this.$message({ type: "success", message: res.data.message });
              //将值存入到sessionStorage
              window.sessionStorage.setItem("user", JSON.stringify(res.data.data));
              window.sessionStorage.setItem("token", JSON.stringify(res.data.token));
              this.$router.push("/UserList");
            }
            else {
              this.$message({ type: "error", message: res.data.message });
            }
          });
        } 
        else {
          return false;
        }
      });
    },
    //【取消】
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //打开注册对话框
    OpenRegister(){
      this.dialogFormVisible = true;
    },
    //【注册】
    Reg() {
      //父组件调用子组件页面
      this.$refs.RegisterView.RegInfo("form");
    },
  },
  created() {   
    this.createCheckCode();  //调用验证码图片方法
  },
};
</script>
<style>
.BackPic {
  background: url("../../assets/Image07.jpg");
  background-size: 100% 100%;
  height: 100%;
  overflow: hidden;  
}
.loginMain {
  width: 500px;
  margin: 0 auto;  
  align-content: center;
  margin-top: 200px;
  margin-bottom: 200px;
}
</style>
